<template>
 <div class="imgBox">
        <img :src="props.cover"/>
        <span>{{ props.score }}</span>
        <span></span>
        <span></span>
    </div>
    <div class="infoBox" :style="getColor">
        <p>
            <span>{{ props.index + 1 }}</span>
        </p>
        <p>
            <span>{{ props.title }}</span>
            <span>{{ props.lable }}</span>
        </p>
    </div> 
</template>

<script lang="ts" setup>
import { computed } from 'vue'
import comicWeekColor from '@/JSON/comicWeekColor.json'
import Color from 'color'
interface Props{
        title:string,
        cover:string,
        lable:string,
        text:[string],
        score:string,
        index:number,
        color:string
}
const props = defineProps<Props>()

//随机返回一个颜色
const getColor = computed(() => {

    if (!props.color) {
        let colorIndex = null
        colorIndex = Math.floor(Math.random() * comicWeekColor.length)
        if (props.index === 0 || props.index === 1 || props.index === 2) {
            colorIndex = 5
        }
        return {
       "--color": comicWeekColor[colorIndex].text,
       "--back": comicWeekColor[colorIndex].back
    }
    } else {
        return {
            "--color":props.color,
            "--back":Color(props.color).lighten(0.7),
        }
    }


})
</script>

<style lang="scss" scoped>
@import url(../../../assets/css/comicHotCard.scss);
p{
    margin: 0;
    padding: 0;
}
.imgBox{
    height: 80%;
}
.infoBox{
    display: flex;
    width: 100%;
    height: 15%;
    border-bottom-left-radius: 8px;
    border-bottom-right-radius: 8px;
    box-shadow: 0 -20px 2px var(--back);
    padding-top: 10px;
    background: var(--back);
    box-sizing: border-box;
    & p:nth-child(1){
        display: flex;
        align-items: center;
        justify-content: end;
        overflow: hidden;
        padding: 0 5px 0 10px;
    }
    & p:nth-child(1) span{
        font-family:'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
        color: var(--color);
        font-weight: 900;
        font-size: 70px;
        font-style: italic;
        opacity: 0.3;
    }
    & p:nth-child(2){
        max-width: 60%;
        display: flex;
        flex-direction: column;
        align-items: start;
        color: #18191C;
        text-align: left;
    }
    & p:nth-child(2) span:nth-child(1){
        width: 100%;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        cursor: pointer;
    }
    & p:nth-child(2) span:nth-child(1):hover{
        color: #069cfae0;
    }

    & p:nth-child(2) span:nth-child(2){
        color: #00000080;
        cursor: default;
        font-size: 13px;
    }
}
</style>